<template>
  <div>
     <el-backtop :right="100" :bottom="100" target=".el-main" :visibility-height="1" ref="backtop" />
      <div class="demoBox" style=" margin-top: 20px;">
          <el-config-provider :locale="locale">
          <el-pagination
            v-model:currentPage="pages"
            v-model:page-size="limits"
            :page-sizes="[10,20,40,80,100, 200, 300, 400]"
            layout="total, sizes, prev, pager, next, jumper"
            background
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
           </el-config-provider>
      </div>
  </div>
</template>

<script>
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
export default {
components:{
ElConfigProvider//国际化中文
},
  setup() {
    return {
      locale: zhCn,
    };
  },
  data(){
    return{
       pages:this.page,
        limits:this.limit
    }
  },
  created(){
    // console.log(this.demo);
  },
  props:{

       page:Number,
        limit:Number,
        total:Number,

  },
  methods:{
    // 分页---每页显示条目个数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.$emit("limits",val)
      this.back()

    },
    //分页---当前页数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
     this.$emit("pages",val)
      this.back()
    },
    back(){//this.$refs.backtop回到顶部“.$el”节点有一个data属性，data属性里面有v-if属性值

    // let bool = Math.ceil(this.total/this.limit)>=this.page
    // if (!bool)return this.$nextTick(()=>{
    //   this.$emit("back",val)
    // })

      if(this.$refs.backtop.$el.data != 'v-if'){//如果data属性没有v-if属性值
        this.$nextTick(() => {//就立即执行这个回调函数
            this.$refs.backtop.$el.click?.();//如果有click函数就执行这个 this.$refs.backtop.$el.click?.()函数
          });
      }
    }
  }
}
</script>
